{% extends 'blog_base.html' %}

{% block title %}首页{% endblock %} 

{% block head %}
<script src="{% static 'js/index_blog.js' %}"></script>
{% endblock %} 

{% block main %}
  <div style="display: flex;justify-content: flex-start;align-items: center;">
    <h1>首页</h1>
    <div style="color: rgb(255, 115, 0);font-size: 18px;">（博客列表）</div>
  </div>
  <hr>
  <div class="row row-cols-2 row-gap-4" id="blog-list">
    {% for blog in blogs %}
      <div class="col">
        <div class="card">
          <div class="card-header" style="display: flex;justify-content: space-between;">
            <div><a href="{% url 'myblog:detail_blog' blog_id=blog.id %}">{{blog.title}}</a></div>
            <div>
              <!-- 防止csrf攻击 -->
              {% csrf_token %}
              <img
                data-id="{{blog.id}}"
                data-name="{{blog.title}}"
                data-key="del-blog"
                style="cursor: pointer;"
                src="{% static 'images/shanchu.png' %}"
                width="16"
                height="16"
                alt=""
              />
            </div>
          </div>
          <div class="card-body">
            <p class="card-text" style="height: 100px">{{blog.content|striptags|truncatechars:120}}</p>
          </div>
          <div
            class="card-footer text-body-secondary d-flex justify-content-between"
          >
            <div>
              <img
                src="{% static 'images/avat.jpg' %}"
                class="rounded-circle"
                width="30"
                height="30"
                alt=""
              />
              <span>{{blog.author.username}}</span>
            </div>
            <div>发布时间：{{blog.pub_time|date:"Y年m月d日 h时i分s秒"}}</div>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
{% endblock %}
